<script lang="ts">
import { defineComponent, reactive } from "vue";
import { NButton, NLayout, NLayoutHeader, NLayoutContent } from "naive-ui";
import { HDataTable, HConditionalSearch } from "@/components";
import { DialogProps, TableProps } from "@/type";
import { Columns } from "./columns";
import { Service } from "@/type";
import { QualitySchemeService } from "@/api";

export default defineComponent({
  name: "qulity-scheme",
  components: {
    NButton,
    NLayout,
    NLayoutHeader,
    NLayoutContent,

    //
    HDataTable,
    HConditionalSearch,
  },
  setup() {
  const state = reactive({}) as QualityState;
  return {
    state,
  }
  },
  computed: {
    searchProps(): DialogProps {
      return {
        columns: Columns()?.filter((c) => !c.hideInSearch),
      };
    },
    tableProps(): TableProps {
      return {
        columns: Columns(),
        title: "质量方案",
        service: QualitySchemeService as Service,
      };
    },
  },
});
</script>
<template>
  <n-layout>
    <n-layout-header>
      <h-conditional-search v-bind="searchProps" />
    </n-layout-header>
    <n-layout-content>
      <h-data-table v-bind="tableProps">
        <template #QualityButton>
          <n-button strong secondary>效验</n-button>
        </template>
      </h-data-table>
    </n-layout-content>
  </n-layout>
</template>
<style lang="less" scoped>
.n-layout {
  background-color: #f6f6f7;
  width: 100%;
  .n-layout-header {
    width: 100%;
  }
}
</style>
